@import 'variable.scss';
@import 'icon.scss';

html,body {
  margin: 0;
  height: 100%;
  background-color: $base-bg;
}
body{
  font-size: 62.5%;
}
ul, ul li, p{
  list-style: none;
  margin: 0;
  padding: 0;
}

//*********mixin***********
// font-size
@mixin font-size($size) {
  font-size: $size;
}
@mixin position-Fixed($left, $bottom, $width, $zindex){
  position: fixed;
  left: $left;
  bottom: $bottom;
  width: $width;
  z-index: $zindex;
}

//border-radius
@mixin border-radius-bottom($left, $right){
  border-bottom-left-radius: $left;
  border-bottom-right-radius: $right;
}

//bg-color
@mixin bg-color($color){
  background-color: $color !important;
}

//*************extend***************//
.display-flex{
  display: flex;
}

//font-size
.font-size-smaller{
  @include font-size(0.7rem);
}
.font-size-small{
  @include font-size(0.9rem);
}
.font-size-base{
  @include font-size(1.1rem);
}
.text-overflow{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//border-radius
.border-radius-bottom{
  @include border-radius-bottom(0.25rem, 0.25rem);
}

//bg-color
.note-success{
  @include bg-color(#5cb85c);
}
.note-warning{
  @include bg-color(#f0ad4e);
}
.note-danger{
  @include bg-color(#d9534f);
}

//tabs
.tabs-box{
  @extend .display-flex;
  background-color: $base-bg;
  color: $font-gray;
  .tab-item{
    @extend .display-flex;
    padding-left: $padding-base;
    cursor: pointer;
    height: 2.1857rem;
    border-right: 1px solid $light-bg;
    align-items: center;
    .icon-close{
      color: $font-green;
      padding-left: $padding-base;
      padding-right: $padding-base;
      &:before{
        @extend .font-size-small;
        content: "Ｘ";
      }
      &:hover,
      &:active{
        opacity: 0.5;
      }
    }
    &:hover{
      background-color: $hover-bg;
    }
    &.active{
      background-color: $main-bg;
      color: $font-white;
      &:hover{
        background-color: none;
      }
    }
    &.modified{
      .icon-close{
        &:before{
          display: none;
        }
        &:after{
          @extend .font-size-base;
          color: $font-green;
          font-family: 'icomoon' !important;
          content: "\e904";
        }
        &:hover,
        &:active{
          &:after{
            @extend .font-size-small;
            content: "Ｘ";
            padding-left: 0.103125rem;
            padding-right: 0.103125rem;
          }
        }
      }
    }
    //first-child
    &:first-child{
      &.active{
        border-left: 1px solid $dark-bg;
        &:hover{
          border-left: 1px solid $dark-bg;
        }
      }
    }
  }
}
// tree-view
.tree-view-children{
  @extend .display-flex;
  flex: 0 0 auto;
  flex-direction: column;
  .tree-view-node{
    @extend .display-flex;
    flex-direction: column;
    line-height: 2.1875rem;
    cursor: pointer;
    color: $font-gray;
    position: relative;
    z-index: 2;
    .label{
      @extend .font-size-smaller;
      display: block;
      padding-left: $padding-base;
      padding-right: $padding-base;
      &:before{
        @extend .font-size-base;
        position: relative;
        top: 0.125rem;
        font-family: 'icomoon' !important;
        margin-right: 0.25rem;
        line-height: 1rem;
      }
    }
    // dir
    &.dir{
      order: 0;
      .label{
        position: relative;
        font-weight: 600;
        &:before{
          color: $font-green;
          content: "\e907";
        }
        &:after{
          content: '';
          position: absolute;
          left: .625rem;
          top: 0.9375rem;
          height: 0.4375rem;
          width: 1rem;
          visibility: hidden;
          background-color: $font-green;
          color: $font-white;
          z-index: -1;
        }
        &:hover,
        &:active,
        &:visited{
          color: $font-green;
          &:after{
            visibility: visible;
          }
        }
      }
    }
    // file
    &.file{
      order: 1;
      .label{
        font-weight: 200;
        &:before{
          content: "\e902";
          color: $font-gray;
        }
        &:hover,
        &:active,
        &:visited{
          color: $font-white;
          &:before{
            color: $font-white;
          }
        }
      }
    }
    &.active{
      .label{
        color: $font-white;
        &:before{
          top: 0.125rem;
          position: relative;
        }
        &:after{
          content: '';
          position: absolute;
          left: -100%;
          top: 0;
          height: 2.1875rem;
          width: 200%;
          background-color: $active-bg;
          color: $font-white;
          z-index: -1;
        }
      }
    }
    &.collapsed{
      .label{
        &:before{
          color: $font-green;
          content: "\e903" !important;
        }
      }
      .tree-view-children{
        display: none;
      }
    }
    //子级
    .tree-view-children{
      flex: 1 1 auto !important;
      .tree-view-node{
        padding-left: $padding-base * 2;
        &.file{
          order: 1;
          .label{
            font-weight: 200;
            &:hover,
            &:active,
            &:visited{
              color: $font-white;
            }
            &:after{
              display: none;
            }
          }
        }
      }
    }
  }
}
//目录文件 右击菜单
.react-context-menu{
  @extend .font-size-smaller;
  font-family: $ui-font;
  padding: $padding-base / 2;
  background-color: $pop-base-bg;
  outline: none;
  border-radius: 0.125rem;
  .react-context-menu-item{
    a{
      @extend .text-overflow;
      padding-left: $padding-base;
      padding-right: $padding-base;
      min-width: 6.25rem;
      max-width: 6.25rem * 2;
      display: block;
      color: $font-gray;
      line-height: 1.5625rem;
      height: 1.5625rem;
      text-decoration: none;
      &:hover,
      &:active,
      &:visited{
        background-color: $pop-base-hover-bg;
        color: $font-white;
      }
    }
  }
}

// scss start
.container {
  > div {
    @extend .display-flex;
    height: 100%;
    position: relative;
  }
  @extend .font-size-smaller;
  height: 100%;
  overflow: hidden;
  color: $font-white;
  background-color: $base-bg;
  //tree-view
  .tree-view{
    @extend .display-flex;
    font-family: $ui-font;
    color: $font-white;
    width: 18.75rem;
    flex: 0 0 auto;
    overflow: scroll;
    padding-bottom: $padding-base * 2;
    flex-direction: column;
    margin-bottom: 1.5625rem;
    margin-top: $padding-base;
  }
  .directory-placeholder{
    @extend .display-flex;
    flex: auto;
  }
  //main-view
  .main-view{
    @extend .display-flex;
    background-color: $main-bg;
    flex-direction: column;
    flex: 1 1 auto;
    //tabs
    .tabs{
      @extend .tabs-box;
      font-family: $ui-font;
    }
    //editor-container
    .editor-container{
      @extend .display-flex;
      font-family: $editor-font;
      border-left: 1px solid $dark-bg;
      flex: 1 1 auto;
      padding-top: $padding-base;
      .editor{
        width: 100%;
        display: none;
        overflow: scroll;
        margin-bottom: 4.6875rem;
        position: relative;
        &.active{
          display: block;
        }
        //编辑器
        .ace-monokai{
           background-color: transparent;
           position: absolute;
           left: 0;
           top: 0;
           .ace_gutter{
            background: transparent;
           }
           .ace_comment{
            color: #808690;
           }
           .ace_gutter{
            color: #4b525b;
           }
           .ace_entity.ace_name.ace_tag,
           .ace_keyword,
           .ace_meta.ace_tag,
           .ace_storage{
            color: #60b9e3;
           }
           .ace_invalid {
            background-color: #60b9e3;
           }
           .ace_support.ace_constant,
           .ace_support.ace_function {
            color: #81c8c2;
           }
           .ace_storage.ace_type,
           .ace_support.ace_class,
           .ace_support.ace_type {
            color: #81c8c2;
           }
           .ace_constant{
             &.ace_character,
             &.ace_language,
             &.ace_numeric,
             &.ace_other{
              color: #bba2e8;
             }
           }
           .ace_string{
            color: #eed57f;
           }
           .ace_gutter-active-line{
            background: $light-bg;
           }
           .ace_marker-layer{
            .ace_selection{
              background: $light-bg;
            }
            .ace_active-line{
              background: $base-bg;
            }
           }
        }
      }
    }
  }
  //status-bar
  .status-bar{
    @extend .display-flex;
    @extend .font-size-smaller;
    @include position-Fixed(0, 0, 100%, 9);
    font-family: $ui-font;
    color: $font-gray;
    background-color: $base-bg;
    height: 1.5625rem;
    padding-left: $padding-base;
    padding-right: $padding-base;
    align-items: center;
    border-top: 1px solid $dark-bg;
    .tool-bar{
      @extend .display-flex;
      font-family: $ui-font;
      justify-content: flex-end;
      border-top: none;
      border-bottom: none;
      flex: 1;
      align-items: center;
      .icon-full-moon{
        font-size: 1.875rem;
        margin-right: $padding-base;
        color: $font-gray;
        &.state-success{
          &:before{
            color: $font-green;
          }
        }
        &.state-warning{
          &:before{
            color: #f0ad4e;
          }
        }
        &.state-danger{
          &:before{
            color: #d9534f;
          }
        }
      }
      //refresh
      .btn-restart{
        @extend .icon-refresh;
        @extend .font-size-smaller;
        font-family: 'icomoon' !important;
        cursor: pointer;
        display: block;
        &:before{
          padding-right: 0.1875rem;
        }
        &:hover,
        &:active{
          color: $font-green;
        }
      }
    }
  }
}

//浮层 ReactModalPortal
.ReactModalPortal{
  // ReactModalPortal
  .modal-overlay{
    font-family: $ui-font;
    @extend .display-flex;
    padding-left: $padding-base;
    padding-right: $padding-base;
    box-shadow: -1px 0px 2px rgba(0,0,0,0.65);
    border-bottom: 1px solid $base-bg;
    align-items: center;
    height: 3.125rem;
    background-color: $main-bg;
    color: $font-white;
    //path-input-bar
    .path-input-bar{
      width: 100%;
      .path-input-box{
        @extend .display-flex;
        flex: 1;
        align-items: center;
        padding-right: $padding-base * 2;
        input[type="text"]{
          @extend .font-size-smaller;
          @extend .display-flex;
          box-shadow: 0px 1px 0px $pop-base-bg;
          padding: $padding-base / 2;
          flex: 1;
          margin-left: $padding-base / 2;
          background-color: transparent;
          outline: none;
          border: 0;
          color: #fff;
        }
      }
    }//end path-input-bar
  }
  //modal-dialog-overlay
  .modal-dialog-overlay{
    .confirm-delete-dialog{
      @include position-Fixed(50%, auto, 30rem, 1);
      top: 45%;
      transform: translate(-50%, -50%);
      color: $font-white;
      height: 15rem;
      outline: none;
      border-radius: 0.125rem;
      background-color: $pop-base-bg;
      .dialog-header{
        @extend .display-flex;
        justify-content: flex-start;
        align-items: center;
        height: 3.875rem;
        padding-left: $padding-base;
        h2{
          font-size: 1.125rem;
        }
      }
      .dialog-content{
        @extend .font-size-small;
        color: $font-gray;
        min-height: 6.25rem;
        border-top: 1px solid $light-bg;
        border-bottom: 1px solid $light-bg;
        padding: $padding-base;
      }
      .dialog-actions{
        @extend .display-flex;
        justify-content: flex-end;
        align-items: center;
        height: 3.5rem;
        button{
          @extend .font-size-small;
          color: $font-white;
          outline: none;
          padding: 0.625rem 1rem;
          border: 0;
          border-radius: 0.125rem;
          margin-right: $padding-base;
          cursor: pointer;
          &:last-child{
            background-color: $active-bg;
          }
          &:first-child{
            background-color: #888d94;
          }
          &:hover,
          &:active{
            opacity: 0.5;
          }
        }
      }
    }
  }//end modal-dialog-overlay
  //notifications
  .modal-notifications-overlay{
    @extend .border-radius-bottom;
    background: $pop-base-bg;
    height: 1.5rem;
    .notifications{
      width: 100%;
      outline: none;
    }
  }
  //top
  .bottom{
    @include position-Fixed(0, 1.5625rem, 100%, 2);
  }
  //center
  .middle{
    @include position-Fixed(0, auto, 100%, 9);
    background: rgba(0,0,0,0.5);
    top: 0;
    height: 100%;
  }
  //top
  .top{
    @include position-Fixed(0, auto, 100%, 9);
    top: 0;
  }
  .top-center{
    @include position-Fixed(50%, auto, 70%, 9);
    top: 0;
    transform: translateX(-50%);
  }
}
